import './style.css'
import 'ol/ol.css'
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import { OSM, XYZ } from 'ol/source';
import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import Style from 'ol/style/Style';
import GeoJSON from 'ol/format/GeoJSON.js'

// ol 事宜面向对象的形式设计 api 的 js 库，可以用来制作地图、图层、控件、交互等
/**
 * target: 地图容器
 * view: 地图视图
 * layers: 地图的图层（都有一个底图）
 * source: 图层的源
 */
const map = new Map({
    target: 'map', 
    view: new View({
        center: [114.3165, 30.5953], // 地图中心点
        zoom: 4, // 缩放级别
        projection: 'EPSG:4326', // 投影 默认情况下 ol 使用的不是经纬度坐标系 使用的是墨卡投影体系
    }),
    layers: [new TileLayer({
        source: new XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
        })
        // source: new OSM()
    })]
})

const vectorSource = new VectorSource({
    url: 'https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json',
    format: new GeoJSON()
})
   
const vectorLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        fill: new Fill({
            color: 'rgba(255, 0, 0, 0.6)'
        }),
        stroke: new Stroke({
            color: 'green'
        })
    })
})

vectorSource.on('change', function (e) {
  const length = this.getFeatures().length
  console.log(length)  
})

map.addLayer(vectorLayer)

const div = document.createElement('div')
div.style.padding = '5px'
div.style.border = '1px solid black'
div.style.textAlign = 'center'
div.style.backgroundColor = 'white'

const popup = new Overlay({
    element: div,
    positioning: 'center-center',
})

map.addOverlay(popup)

map.on('pointermove', function(e) {
    const coordinate = e.coordinate
    const features = vectorSource.getFeaturesAtCoordinate(coordinate)
    const allFeatures = vectorSource.getFeatures()
    allFeatures.forEach(feature => {
        feature.setStyle(
            new Style({
                fill: new Fill({
                    color: 'rgba(255, 0, 0, 0.6)'
                }),
                stroke: new Stroke({
                    color: 'green'
                })
            })
        )
    })
    // 获取要素
    if(features[0]) {
        // 给这个要素信息设置高度
        features[0].setStyle(
            new Style({
                fill: new Fill({
                    color: 'rgba(0, 0, 255, 0.6)'
                })
            })
        )
        // 设置 overlay 的位置 获取要素的一个位置信息
        // feature => 几何信息  geometry => 坐标信息
        let location = features[0].getGeometry().getCoordinates()[0][0]
        if(typeof location[0] == 'number') {
            location = location
        } else {
            location = location[0]
        }
        popup.setPosition(location)
        // 想 overlay 中添加内容（来自 feature 的信息）
        let adcode = features[0].get('adcode')
        let name = features[0].get('name')
        let level = features[0].get('level')
        div.innerHTML = `
            <p>省份名称：${name}</p>
            <p>省份编码：${adcode}</p>
            <p>行政级别：${level}</p>
        `
    }
})
